<template>
  <div style=" line-height: 60px; display: flex">
    <div style="flex: 1">
      <span :class="collapseBtnClass" style="cursor: pointer;font-size: 17px" @click="collapse"></span>

      <el-breadcrumb separator="/" style="display: inline-block;margin-left: 12px">
        <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" :to="{ path: item.path }">{{
            item.name
          }}
        </el-breadcrumb-item>
        <!--                <el-breadcrumb-item @click="navigateTo('/')">首页</el-breadcrumb-item>
                        <el-breadcrumb-item @click="navigateTo('/#/user')">用户管理</el-breadcrumb-item>
                        <el-breadcrumb-item @click="navigateTo('/post')">帖子管理</el-breadcrumb-item>
                        <el-breadcrumb-item @click="navigateTo('/order')">订单管理</el-breadcrumb-item>
                        <el-breadcrumb-item @click="navigateTo('/medicine')">药品信息管理</el-breadcrumb-item>
                        <el-breadcrumb-item @click="navigateTo('/article')">文章管理</el-breadcrumb-item>
                        <el-breadcrumb-item @click="navigateTo('/comment')">评论管理</el-breadcrumb-item>-->

      </el-breadcrumb>
    </div>
    <el-dropdown style="width:70px;cursor: pointer">
      <div style="display:inline-block">
        <!--            <img src="D:\app\java\workspace\cheVueSpring\cheVueSpring\chevue\public\picture.png" alt=""
                         style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">-->
        <span>车英韬</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      </div>

      <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
        <el-dropdown-item style="font-size: 14px;padding: 5px 0">个人信息</el-dropdown-item>
        <el-button @click="Quit" style="border: none;width: 100%">退出</el-button>
        <!--        <el-dropdown-item style="font-size: 14px;padding: 5px 0" @click="Quit()">退出</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    collapse: {type: Function},
  },
  computed: {
    breadcrumbs() {
      return this.$route.matched.map(route => ({
        path: route.path,
        name: route.meta.breadcrumbName
      }))
    }
  },

  methods: {
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    Quit() {
      console.log("退出系统---------");
      localStorage.clear();
      this.$router.push("/Login")
    }
  }
}
</script>

<style scoped>

</style>
